<template>
  <div class="modal-overlay" @click="$emit('close')">
    <div class="modal-content" @click.stop>
      <!-- 弹窗头部 -->
      <div class="modal-header">
        <h3>上传文件</h3>
        <button class="close-btn" @click="$emit('close')">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
          </svg>
        </button>
      </div>
      
      <!-- 拖拽上传区域 -->
      <div class="upload-area">
        <div class="upload-icon">
          <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#0074D9" stroke-width="2">
            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
            <polyline points="7 10 12 15 17 10"></polyline>
            <line x1="12" y1="15" x2="12" y2="3"></line>
          </svg>
        </div>
        <h4>拖拽文件到此处上传</h4>
        <p>或</p>
        <label class="upload-btn">
          <span>选择文件</span>
          <input type="file" multiple class="file-input" @change="handleFileSelect" />
        </label>
        <p class="upload-tip">支持的文件类型：图片、文档、音频、视频等，单个文件最大500MB</p>
      </div>
      
      <!-- 上传列表 -->
      <div v-if="uploadList.length > 0" class="upload-list">
        <div class="list-header">
          <span>文件名</span>
          <span>大小</span>
          <span>进度</span>
          <span>状态</span>
          <span>操作</span>
        </div>
        <div v-for="(file, index) in uploadList" :key="index" class="upload-item">
          <div class="file-info">
            <svg v-if="file.type.includes('folder')" width="20" height="20" viewBox="0 0 24 24" fill="#0074D9">
              <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
            </svg>
            <svg v-else-if="file.type.includes('doc') || file.name.endsWith('.docx') || file.name.endsWith('.xlsx') || file.name.endsWith('.pptx')" width="20" height="20" viewBox="0 0 24 24" fill="#11A8FF">
              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
              <polyline points="14 2 14 8 20 8"></polyline>
              <line x1="16" y1="13" x2="8" y2="13"></line>
              <line x1="16" y1="17" x2="8" y2="17"></line>
              <polyline points="10 9 9 9 8 9"></polyline>
            </svg>
            <svg v-else-if="file.type.includes('image')" width="20" height="20" viewBox="0 0 24 24" fill="#FF6B6B">
              <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
              <circle cx="8.5" cy="8.5" r="1.5"></circle>
              <polyline points="21 15 16 10 5 21"></polyline>
            </svg>
            <svg v-else-if="file.type.includes('video')" width="20" height="20" viewBox="0 0 24 24" fill="#FFA94D">
              <polygon points="5 3 19 12 5 21 5 3"></polygon>
            </svg>
            <svg v-else-if="file.type.includes('audio')" width="20" height="20" viewBox="0 0 24 24" fill="#845EC2">
              <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
              <path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"></path>
            </svg>
            <svg v-else width="20" height="20" viewBox="0 0 24 24" fill="#4ECDC4">
              <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
              <line x1="8" y1="21" x2="16" y2="21"></line>
              <line x1="12" y1="17" x2="12" y2="21"></line>
            </svg>
            <span class="file-name" :title="file.name">{{ file.name }}</span>
          </div>
          <div class="file-size">{{ formatSize(file.size) }}</div>
          <div class="file-progress">
            <div class="progress-bar">
              <div class="progress-fill" :style="{ width: file.progress + '%' }"></div>
            </div>
            <span class="progress-text">{{ file.progress }}%</span>
          </div>
          <div class="file-status">
            <span v-if="file.status === 'uploading'" class="status-uploading">上传中</span>
            <span v-else-if="file.status === 'success'" class="status-success">上传成功</span>
            <span v-else-if="file.status === 'error'" class="status-error">上传失败</span>
          </div>
          <div class="file-actions">
            <button v-if="file.status === 'uploading'" class="action-btn cancel" @click="cancelUpload(index)">
              取消
            </button>
            <button v-else-if="file.status === 'error'" class="action-btn retry" @click="retryUpload(index)">
              重试
            </button>
            <button v-else class="action-btn remove" @click="removeFile(index)">
              移除
            </button>
          </div>
        </div>
      </div>
      
      <!-- 弹窗底部 -->
      <div class="modal-footer">
        <button class="btn-secondary" @click="$emit('close')">关闭</button>
        <button class="btn-primary" v-if="uploadList.length > 0" @click="startAllUploads">开始上传</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// Upload list data
const uploadList = ref([])

// Handle file selection
function handleFileSelect(event) {
  const files = event.target.files
  if (files.length > 0) {
    for (let i = 0; i < files.length; i++) {
      const file = files[i]
      uploadList.value.push({
        name: file.name,
        type: file.type,
        size: file.size,
        progress: 0,
        status: 'uploading',
        file: file
      })
      
      // Simulate upload progress
      simulateUpload(uploadList.value.length - 1)
    }
  }
}

// Simulate upload progress
function simulateUpload(index) {
  const file = uploadList.value[index]
  const interval = setInterval(() => {
    if (file.status === 'cancelled') {
      clearInterval(interval)
      return
    }
    
    file.progress += Math.floor(Math.random() * 10)
    if (file.progress >= 100) {
      file.progress = 100
      file.status = 'success'
      clearInterval(interval)
    }
  }, 500)
}

// Cancel upload
function cancelUpload(index) {
  uploadList.value[index].status = 'cancelled'
  uploadList.value[index].progress = 0
}

// Retry upload
function retryUpload(index) {
  uploadList.value[index].status = 'uploading'
  uploadList.value[index].progress = 0
  simulateUpload(index)
}

// Remove file from list
function removeFile(index) {
  uploadList.value.splice(index, 1)
}

// Format file size
function formatSize(bytes) {
  if (bytes === 0) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

// Start all uploads
function startAllUploads() {
  console.log('开始所有文件上传')
  // 遍历所有上传项，对未开始或已取消的文件重新开始上传
  uploadList.value.forEach((file, index) => {
    if (file.status !== 'uploading' && file.status !== 'success') {
      file.status = 'uploading'
      file.progress = 0
      simulateUpload(index)
    }
  })
}
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  border-radius: 8px;
  width: 90%;
  max-width: 700px;
  max-height: 80vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #e0e0e0;
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.close-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: #666;
  transition: color 0.2s;
}

.close-btn:hover {
  color: #333;
}

.upload-area {
  padding: 40px;
  text-align: center;
  border-bottom: 1px solid #e0e0e0;
}

.upload-icon {
  margin-bottom: 16px;
}

.upload-area h4 {
  margin: 0 0 8px 0;
  font-size: 16px;
  color: #333;
}

.upload-area p {
  margin: 8px 0;
  color: #666;
  font-size: 14px;
}

.upload-btn {
  display: inline-block;
  background-color: #0074D9;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
  margin: 10px 0;
}

.upload-btn:hover {
  background-color: #0056b3;
}

.file-input {
  display: none;
}

.upload-tip {
  font-size: 12px !important;
  color: #999 !important;
}

.upload-list {
  max-height: 300px;
  overflow-y: auto;
}

.list-header {
  display: flex;
  padding: 12px 20px;
  background-color: #f5f5f5;
  font-weight: 600;
  font-size: 14px;
  color: #666;
  border-bottom: 1px solid #e0e0e0;
}

.list-header span:nth-child(1) {
  flex: 2;
}

.list-header span:nth-child(2) {
  width: 100px;
}

.list-header span:nth-child(3) {
  width: 150px;
}

.list-header span:nth-child(4) {
  width: 100px;
}

.list-header span:nth-child(5) {
  width: 80px;
}

.upload-item {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid #f0f0f0;
}

.upload-item:last-child {
  border-bottom: none;
}

.file-info {
  flex: 2;
  display: flex;
  align-items: center;
  gap: 8px;
}

.file-name {
  font-size: 14px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-size {
  width: 100px;
  font-size: 14px;
  color: #666;
}

.file-progress {
  width: 150px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.progress-bar {
  flex: 1;
  height: 6px;
  background-color: #f0f0f0;
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background-color: #0074D9;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 12px;
  color: #666;
  min-width: 30px;
}

.file-status {
  width: 100px;
  font-size: 14px;
}

.status-uploading {
  color: #0074D9;
}

.status-success {
  color: #52c41a;
}

.status-error {
  color: #ff4d4f;
}

.file-actions {
  width: 80px;
}

.action-btn {
  background: none;
  border: none;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s;
}

.action-btn.cancel {
  color: #0074D9;
}

.action-btn.cancel:hover {
  background-color: #e6f7ff;
}

.action-btn.retry {
  color: #faad14;
}

.action-btn.retry:hover {
  background-color: #fff7e6;
}

.action-btn.remove {
  color: #666;
}

.action-btn.remove:hover {
  background-color: #f5f5f5;
  color: #333;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px;
  border-top: 1px solid #e0e0e0;
}

.btn-secondary {
  background-color: #f5f5f5;
  color: #333;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-secondary:hover {
  background-color: #e0e0e0;
}

.btn-primary {
  background-color: #0074D9;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-primary:hover {
  background-color: #0056b3;
}
</style>